<template>
  <view class="found-password-container" @touchstart.prevent>
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;
      </navigator>
      <view class="top-title-bar">
        找回密码
      </view>
    </navigation-bar>
    <view class="main-content-wrapper" style="padding-bottom: 200px">
      <!-- 头像 -->
      <view class="focus-avatar">
        <image class="avatar-pic" src="@/static/avatar.png" mode="aspectFill"></image>
      </view>
      <view class="sub-tip">
        尝试通过电话找回已注册的Campus Circle
        账号，<text class="help">点击查看帮助</text>
      </view>
      <!-- 表单 -->
      <view class="form-wrap">
        <form name="foundPasswordForm">
          <!-- 电话验证 -->
          <view class="phone-validation">
            <view class="phone-title">
              电话验证
            </view>
            <view class="phone-inputs common-inputs">
              <view class="phone-input-box common-input-box">
                <input type="tel" class="phone-input common-input" :adjust-position="false" placeholder="请输入电话"
                  placeholder-style="color: #000;opacity: 0.25;" :hold-keyboard="true" :auto-focus="true"
                  @input.prevent="onInputHandler">
              </view>
              <view class="smscode-input-box common-input-box">
                <input type="number" class="smscode-input common-input" style="width: 300rpx;" :hold-keyboard="true"
                  :adjust-position="false" placeholder="请输入短信验证码" placeholder-style="color: #000;opacity: 0.25;"
                  @input.prevent="onInputHandler">
                <view class="get-code-btn">
                  获取
                </view>
              </view>
            </view>
          </view>
          <!-- 重置密码 -->
          <view class="password-reset">
            <view class="password-title">
              密码重置
            </view>
            <view class="password-inputs common-inputs">
              <view class="newpassword-input-box common-input-box">
                <input type="text" class="newpassword-input common-input" :hold-keyboard="true" :adjust-position="false"
                  placeholder="请输入新密码" placeholder-style="color: #000;opacity: 0.25;" @input.prevent="onInputHandler"
                  @focus="onFocus">
              </view>
              <view class="newpassword_again-input-box common-input-box">
                <input type="text" class="newpassword-input common-input" :hold-keyboard="true" :adjust-position="false"
                  placeholder="请再次输入新密码" placeholder-style="color: #000;opacity: 0.25;" @input.prevent="onInputHandler"
                  @focus="onFocus">
              </view>
            </view>
          </view>
          <view class="notpro-action-validation">
            进行非程序操作验证
          </view>
        </form>
      </view>
    </view>
    <view class="bottom-submit-btn">
      提交
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    onLoad() {},
    onUnload() {},
    methods: {
      onInputHandler: function({
        detail: {
          value
        }
      }) {},
      onFocus: function(e) {
        uni.pageScrollTo({
          scrollTop: 999,
          duration: 0
        })
      }
    }
  }
</script>

<style lang="scss">
  .found-password-container {
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 240rpx;

    .main-content-wrapper {
      .focus-avatar {
        padding-top: 100rpx;
        text-align: center;

        .avatar-pic {
          width: 140rpx;
          height: 140rpx;
        }
      }

      .sub-tip {
        padding: 30rpx 100rpx 0;
        color: #000;
        font-size: 28rpx;
        text-align: center;

        .help {
          color: #244FFF;
        }
      }

      .form-wrap {
        padding: 0 30rpx;

        .common-inputs {
          padding: 0 40rpx;
        }

        .phone-title,
        .password-title {
          margin-top: 40rpx;
          margin-bottom: 40rpx;
          font-size: 36rpx;
          font-weight: 600;
        }

        .common-input-box {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          height: 100rpx;
          padding: 28rpx 10rpx;
          border-bottom: 1rpx solid #00000040;
        }

        .common-input {
          width: 100%;
          height: 100%;
          color: #000;
          font-size: 36rpx;
        }

        .get-code-btn {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          height: 50rpx;
          padding: 20rpx;
          line-height: 50rpx;
          color: #244FFF;
          font-size: 38rpx;
        }

        .notpro-action-validation {
          margin-top: 40rpx;
          text-align: center;
          color: #244FFF;
          font-size: 36rpx;
        }
      }
    }

    .bottom-submit-btn {
      position: fixed;
      bottom: 120rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 610rpx;
      height: 80rpx;
      background-color: #000;
      border-radius: 50rpx;
      color: #FFF;
      font-size: 40rpx;
      text-align: center;
      line-height: 80rpx;
      z-index: 99;
    }
  }
</style>